﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../static/before/js/echarts.min.js"></script>
 <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="http://cdn.zaixianke.com/china.js"></script>
    <script src="../static/before/js/jquery.min.js"></script>
    <title>游客舆情分析</title>
     <link rel="stylesheet" href="../static/before/css/wodry.css">
    <link rel="stylesheet" href="../static/before/css/test4.css">
    <link rel="stylesheet" href="../static/before/css/public.css">

    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        });

        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({ fontSize: whei / 22 });
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({ fontSize: whei / 22 })
            });
        });
    </script>
</head>
<body>

<div class="main">
    <div class="header">
        <div class="header-left fl" id="time"></div>
        <div class="header-center fl">
            <div class="header-title">
                游客舆情分析
            </div>
            <div class="header-img"></div>
        </div>
        <div class="header-right fl"></div>
        <div class="header-bottom fl"></div>

    </div>

    <div class="center">
        <div class="center-left fl">
            <div class="left-top rightTop border">
                <div class="title">梵净山景区评论词云</div>
                <img src="../static/pic_final.png" width="360px">
            </div>

            <div class="left-cen rightTop border">
                <div class="title">龙宫景区评论词云</div>
                <img src="../static/longgong.png" width="360px">
            </div>
        </div>

        <div class="center-cen fl">
            <div class="cen-top rightTop border">
                <div class="title">黄果树景区评论词云</div>
                <img src="../static/huangguoshu.png" width="360px" height="330">
            </div>

            <div class="cen-bottom rightTop border">
                <div class="title">小七孔景区评论词云</div>
                <img src="../static/xiao.png" width="360px">
            </div>
        </div>

        <div class="center-cen2 fl">
             <div class="cen-top rightTop border">
                <div class="title">千户苗寨评论词云</div>
                <img src="../static/miaozhai.png" width="360px">
             </div>

            <div class="cen-bottom rightTop border">
                <div class="title">天眼基地评论词云</div>
                <img src="../static/tianyan.png" width="360px">
            </div>
        </div>

        <div class="center-right fr">
            <div class="right-top rightTop border">
                <div class="title">织金洞景区评论词云</div>
                <img src="../static/zhi.png" width="360px">
            </div>

            <div class="right-cen border">
                <div class="bottom-b">
                    <div class="title">青岩古镇景区评论词云</div>
                    <img src="../static/qingyan.png" width="360px" height="330">
                </div>
            </div>
        </div>
    </div>


</div>


<script>
var chartDom = document.getElementById('payNum2');
var myChart = echarts.init(chartDom, 'dark');
var option;

option = {
    title: {
        text: '不同支付方式使用频率情况',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1987, name: '刷卡'},
                {value: 838, name: '转账'},
                {value: 2652, name: '微信'},
                {value: 1910, name: '收银宝'},
                {value: 97, name: '押金条'},
                {value: 320, name: '现金'},
                {value: 72, name: '招待签单'},
                {value: 39, name: '抵消费签单'},
                {value: 382, name: '定金'},
                {value: 561, name: '支付宝'},

                {value: 1749, name: 'Q支付'},
                {value: 487, name: '中信全付通'},
                {value: 158, name: '踩线'},

            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

option && myChart.setOption(option);

</script>

<!-- 地图模块-消费金额 开始-->
<script>
        // 初始化echarts实例
        var myEcharts = echarts.init(document.getElementById("box22"));
        var option = {
            title: {  //标题样式
                text: '中国各省旅游人流量分布',
                x: "center",
                textStyle: {
                    fontSize: 18,
                    color: "blue"
                },
            },
            tooltip: {  //这里设置提示框
                trigger: 'item',  //数据项图形触发
                backgroundColor: "red",  //提示框浮层的背景颜色。
                //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
                formatter: '地区：{b}<br/>人流量：{c}'
            },
            visualMap: {//视觉映射组件
                top: 'center',
                left: 'left',
                min: 10,
                max: 500000,
                text: ['High', 'Low'],
                realtime: false,  //拖拽时，是否实时更新
                calculable: true,  //是否显示拖拽用的手柄
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            },
            series: [
                {
                    name: '人流量',
                    type: 'map',
                    mapType: 'china',
                    roam: false,//是否开启鼠标缩放和平移漫游
                    itemStyle: {//地图区域的多边形 图形样式
                        normal: {//是图形在默认状态下的样式
                            label: {
                                show: true,//是否显示标签
                                textStyle: {
                                    color: "black"
                                }
                            }
                        },
                        zoom: 1.5,  //地图缩放比例,默认为1
                        emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                            label: { show: true }
                        }
                    },
                    top: "3%",//组件距离容器的距离
                    data: [

                            { name: '湖南', value: 54148 },
                        { name: '江西', value: 6854 },
                        { name: '湖北', value: 1213 },
                        { name: '河南', value: 495 },
                        { name: '四川', value: 413 },
                        { name: '广东', value: 344 },
                        { name: '贵州', value: 233 },
                        { name: '安徽', value: 216 },
                        { name: '河北', value: 195 },

                        { name: '陕西', value: 186 },
                        { name: '江苏', value: 182 },
                        { name: '福建', value: 172 },
                        { name: '浙江', value: 159 },
                        { name: '山东', value: 153 },
                        { name: '甘肃', value: 109 },

                        { name: '山西', value: 105 },
                        { name: '辽宁', value: 97 },
                        { name: '云南', value: 92 },
                        { name: '吉林', value: 91 },
                        { name: '青海', value: 48 },
                        { name: '海南', value: 30 },

                        { name: '新疆', value: 0 },
                        { name: '西藏', value: 0 },
                        { name: '内蒙古', value: 0 },
                        { name: '黑龙江', value: 0 },
                        { name: '宁夏', value: 0 },
                        { name: '广西', value: 0 },
                        { name: '北京', value: 0 },
                        { name: '天津', value: 0 },
                        { name: '重庆', value: 0 },




                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myEcharts.setOption(option);
    </script>
 <!-- 地图模块-消费金额 结束-->

<script src="../static/before/js/jquery.min.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="../static/before/js/testc4.js"></script>
<script src="../static/before/js/wodry.min.js"></script>
<script src="../static/before/js/fontscroll.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="http://cdn.zaixianke.com/china.js"></script>
<!--<script src="js/mymap.js"></script>-->
<script>
    /*$('#ceshi').wodry({
        animation: 'rotateX',
        delay: 1000,
        animationDuration: 800
    });*/
    /*window.onload = function () {
        setInterval(function () {
            var hs=document.getElementById("ceshi");
            var hstyle=hs.style.transform;
            if(hstyle=='rotateX(-360deg)'){
                //console.log(1)
                hs.style.transform='rotateX(0deg)';
                hs.style.transform='transform 500ms cubic-bezier(0.55, 0.18, 0.92, 0.46) 0s;'
            }else {
                hs.style.transform='rotateX(-360deg)';
                hs.style.transition="all 2s";
            }
        }, 5000);
    };*/
    var counter = 3000;
    var ulist=document.getElementById("ceshi").getElementsByTagName("li");
    for (var i=0;i<ulist.length;i++){
        //console.log(ulist[i].className);
        var liclass=ulist[i].className;
        var a= $('.'+liclass+'').wodry({
            animation: 'rotateX',
            delay: counter,
            animationDuration: 1000
        });
        if(counter>3050){
            counter=3000;
        }else {
            counter +=10;
        }
        //console.log(counter);

    }

    //顶部时间
    function getTime(){
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var nowTime;

        nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };
    function fillZero(str){
        var realNum;
        if(str<10){
            realNum    = '0'+str;
        }else{
            realNum    = str;
        }
        return realNum;
    }
    setInterval(getTime,1000);

</script>

</body>
</html>